<template>
	<div class="scrollContainer">
		<div class="container">
			<pageBackTop :scrollTop="scrollTop" />
			<fui-modal :show="show" :descr="descr" maskClosable @click="onClick"></fui-modal>
			<fui-card :margin="['25rpx', '20rpx']">
				<view class="fui-card__content">
					<div class="article_title">{{ acticleInfo.log_Title }}</div>
					<div class="article_baseInfo">
						<div class="article_auth">作者：{{acticleInfo.mem_Name}}</div>
						<div class="article_time">时间：{{acticleInfo.time}}</div>
					</div>
					<!-- 文章内容 -->
					<fui-divider text="正文开始"></fui-divider>
					<mp :content="acticleInfo.log_Content"></mp>
					<fui-divider text="正文结束"></fui-divider>
				</view>
			</fui-card>
			<fui-card :margin="['25rpx', '20rpx']">
				<view class="fui-card__content">
					<div class="copy">
						<div class="copy_base">版权归属：文章由米耀华发布,侵权请联系删除。</div>
						<div class="copy_base"><br />使用《非商业性使用 -
							相同方式共享4.0国际(CCBY-NC-SA4.0)》协议授权。</div>
						<div class="copy_warning"><br />若侵害到您的权利,请及时联系,在收到信息后第一时间处理。</div>
					</div>
				</view>
			</fui-card>
			<fui-card :margin="['25rpx', '20rpx']">
				<view class="fui-card__content_comment">
					<div style="padding-left: 20rpx;">评论列表：</div>
					<!-- 评论条数 -->
					<div v-if="commentList.length">
						<div class="comment_list" v-for="item in commentList" :key="item.comm_ID">
							<div class="comment_container">
								<div class="index_comment_container">
									<div class="img_container">
										<img class="index_images" :src="defaultAvatar">
									</div>
								</div>
								<div class="list_comment_container">
									<div class="index_comment_info">
										<div class="comm_Name">
											{{ item.comm_Name }}
										</div>
										<div class="comm_PostTime">
											{{ item.comm_PostTime }}
										</div>
										<div class="huifu" style="color:#E4905F" @click="replyEvent(item)">回复</div>
										<!-- <div class="shanchu" @click="deleteArticle(item)"
											v-if="item.comm_AuthorID == store.state.userInfo.mem_ID">删除</div> -->
									</div>
									<div class="index_comment_content">{{ item.comm_Content }}</div>
									<div class="two_comment_container" v-for="items in item.children"
										:key="items.comm_ID">
										<div>
											<div class="two_comment_info">
												<div style="font-size: 26rpx;" class="comm_Name">{{ items.comm_Name }}
												</div>
												<div style="font-size: 26rpx;" class="comm_PostTime">
													{{ items.comm_PostTime }}
												</div>
												<div style="font-size: 26rpx;color:#E4905F" class="huifu"
													@click="replyEvent(item,items)">
													回复</div>
											</div>
											<div class="index_comment_content">{{ items.comm_Content }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div v-else>
						<fui-empty src="/static/images/empty.png" title="这个地方人烟稀少" descr="暂无评论数据~">
							<fui-button @click="goComment" text="抢沙发!" :size="28" width="336rpx" height="84rpx"
								radius="100rpx" background="#fff" :margin="['64rpx','0']" borderColor="#465CFF"
								color="#465CFF"></fui-button>
						</fui-empty>
					</div>
				</view>
			</fui-card>
			<pageFab ref="pageFabRef" :article="acticleInfo" @resetArticle="resetArticle" />
		</div>
	</div>
</template>

<script setup>
	import pageBackTop from '../../page_components/page_backtop/index.vue'
	import {
		onShow,
		onHide,
		onLoad,
		onPageScroll,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import {
		useStore
	} from 'vuex'
	import {
		defaultAvatar
	} from '../../config/index.js'
	import {
		getCommentByArticleIdApi,
		delCommentByIdApi,
		getArticleByIdApi
	} from '../../api/index.js'
	import mp from '../../components/mp-html/components/mp-html/mp-html.vue'
	import pageFab from '../../page_components/page_fab/index.vue'

	const {
		proxy
	} = getCurrentInstance()
	const store = useStore()
	// 分享好友
	onShareAppMessage(() => {
		return {
			path: `/pages/article/index?articleId=${option.value.log_ID}`,
			title: option.value.log_Title,
		}
	})
	// 分享朋友圈
	onShareTimeline(() => {
		return {
			path: `/pages/article/index?articleId=${option.value.log_ID}`,
			title: option.value.log_Title,
		}
	})

	// 回到顶部
	let scrollTop = ref(0)
	onPageScroll((e) => {
		// 取整 取绝对值
		scrollTop.value = Math.abs(Math.floor(e.scrollTop))
	})

	// 文章信息
	let acticleInfo = ref({})
	// 评论信息
	let commentList = ref([])
	// options
	let option = ref({})
	// 评论ref
	const pageFabRef = ref(null)


	onLoad(async (options) => {
		// 查询文章
		const {
			data
		} = await getArticleByIdApi(proxy, {
			id: options.articleId
		})
		if (data?.code == 200) {
			// 初始化文章 && 初始化评论
			option.value = data.data[0]
			inifArticle(data.data[0])
			getCommentByArticleId(data.data[0])
		}
	})
	// 初始化文章
	const inifArticle = (options) => {
		acticleInfo.value = options
		// 修改导航栏标题
		wx.setNavigationBarTitle({
			title: acticleInfo?.value?.log_Title
		})
	}
	// 初始化评论
	const getCommentByArticleId = async (options) => {
		const {
			log_ID
		} = options
		const {
			data
		} = await getCommentByArticleIdApi(proxy, {
			articleId: log_ID
		})
		if (data?.code == 200) {
			console.log(data.data)
			commentList.value = data.data
		}
	}
	// 删除评论
	const deleteArticle = async (item) => {
		const {
			data
		} = await delCommentByIdApi(proxy, {
			id: item.comm_ID
		})
		if (data?.code == 200) {
			getCommentByArticleId(option.value)
		}
	}
	// 刷新文章
	const resetArticle = () => {
		getCommentByArticleId(option.value)
	}
	const show = ref(false)
	const descr = ref('您还未登录，请先登录')
	const onClick = (item) => {
		console.log(item)
		switch (item.index) {
			case 0:
				show.value = false
				break;
			case 1:
				uni.switchTab({
					url: `/pages/my/index`
				});
				break;
		}
	}
	// 添加评论 抢沙发
	const goComment = () => {
		if (!store.state.userInfo.wechat_id) {
			return show.value = true
		}
		pageFabRef.value.isComment = 0
		pageFabRef.value.commonShow = true
	}

	// 回复评论
	const replyEvent = (parent, current) => {
		if (!store.state.userInfo.wechat_id) {
			return show.value = true
		}
		pageFabRef.value.replyOpen(parent, current)
	}
</script>

<style lang="scss" scoped>
	.scrollContainer {
		height: calc(100vh);

		.container {
			padding-bottom: 50rpx;
		}

		.comm_Name {
			font-size: 26rpx;
			width: 180rpx;
			height: 40rpx;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.comm_PostTime {
			font-size: 26rpx;
			width: 180rpx;
			height: 40rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.huifu {
			font-size: 26rpx;
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.shanchu {
			color: red;
			font-size: 26rpx;
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		padding-bottom: 50rpx;

		.fui-card__content {
			padding: 10rpx 25rpx;
			box-sizing: border-box;

			.copy {
				text-align: center;
				padding: 10rpx;
				box-sizing: border-box;
				border-radius: 25rpx
			}

			.copy_base {
				color: #666;
				font-size: 25rpx;
				line-height: 40rpx;
			}

			.copy_warning {
				color: indianred;
				font-size: 25rpx;
				line-height: 40rpx;
			}

			.article_title {
				font-size: 40rpx;
				text-align: center;
				margin-top: 30rpx;
			}

			.article_baseInfo {
				display: flex;
				height: 60rpx;
				justify-content: space-around;
				align-items: center;
				font-size: 20rpx;
				margin-top: 20rpx;
				color: #666;
			}

			.article_src {
				margin: 15rpx 0;
				width: 100%;
				height: 300rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 90%;
					height: 100%;
				}
			}
		}

		.fui-card__content_comment {
			padding: 25rpx 10rpx;
			box-sizing: border-box;

			.comment_list {
				margin-top: 20rpx;

				.comment_container {
					width: 100%;
					min-height: 150rpx;
					border-bottom: 1rpx solid #D4D4D4;
					display: flex;

					.index_comment_container {
						width: 100rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.img_container {
							width: 60rpx;
							height: 60rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.index_images {
								width: 100%;
								height: 100%;
							}
						}
					}

					.list_comment_container {
						width: calc(100% - 100rpx);
						min-height: 150rpx;
						padding: 0 10rpx;
						box-sizing: border-box;

						.index_comment_info {
							height: 80rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

						.index_comment_content {
							padding: 0 10rpx;
							color: #666;
							font-size: 26rpx;
							word-break: break-all;
						}

						.two_comment_container {
							background-color: #F8F8F8;
							margin: 20rpx 0;
							padding: 20rpx 0 20rpx 5rpx;
							box-sizing: border-box;
							border-radius: 10rpx;

							.two_comment_info {
								height: 80rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}
</style>